<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${subCategoryList.parentId}` }">
          {{ subCategoryList.parentName }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ subCategoryList.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="loader"></div>
      正在加载中...
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-card">
      <span class="error-icon">⚠️</span>
      {{ error }}
    </div>

    <template v-else>
      <div class="sub-container">
        <!-- 排序选项卡 -->
        <el-tabs v-model="sortField" @tab-change="handleSortChange">
<!--          <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>-->
<!--          <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>-->
<!--          <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>-->
        </el-tabs>

        <!-- 商品列表 -->
        <div class="products-grid">
          <template v-if="goodList.length === 0">
            <div class="empty-state">
              <img src="@/assets/empty-box.png" alt="空状态" class="empty-image">
              <p>该分类下暂无商品</p>
            </div>
          </template>

          <template v-else>
            <RouterLink
                v-for="product in goodList"
                :key="product.id"
                class="product-card"
                :to="`/detail/${product.id}`"
            >
              <div class="product-image-container">
                <img
                    :src="product.pic"
                    :alt="product.name"
                    class="product-image"
                    loading="lazy"
                >
              </div>
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <p v-if="product.desc" class="product-desc">{{ product.desc || product.description }}</p>
                <div class="price-section">
                  <span class="product-price">
                    ¥{{ product.price.toFixed(2) }}
                  </span>
                  <span class="product-sales">
                    已售 {{ product.sale }} 件
                  </span>
                </div>
              </div>
            </RouterLink>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getSubCategoryListAPI, getBySubCategoryAPI } from '@/apis/category'
export default {
  setup() {
    const route = useRoute()

    // 面包屑数据
    const subCategoryList = ref({})

    // 商品列表数据
    const goodList = ref([])
    const loading = ref(true)
    const error = ref('')
    const sortField = ref('publishTime')

    // 获取分类信息
    const getSubCategory = async () => {
      try {
        const res = await getBySubCategoryAPI(route.params.id)
        subCategoryList.value = res.data
      } catch (err) {
        error.value = `分类信息加载失败: ${err.message}`
      }
    }

    // 获取全部商品
    const getAllProducts = async () => {
      try {
        loading.value = true
        const res = await getSubCategoryListAPI(route.params.id)

        goodList.value = res.data.map(item => ({
          ...item,
          price: Number(item.price),
          orderNum: Number(item.orderNum),
          desc: item.description || item.desc // 统一描述字段
        }))
      } catch (err) {
        error.value = `商品加载失败: ${err.message}`
      } finally {
        loading.value = false
      }
    }

    // 排序变更处理
    const handleSortChange = () => {
      getAllProducts()
    }

    // 初始化加载
    onMounted(async () => {
      await getSubCategory()
      await getAllProducts()
    })

    return {
      subCategoryList,
      goodList,
      loading,
      error,
      sortField,
      handleSortChange
    }
  }
}

// import { ref, onMounted } from 'vue'
// import { useRoute } from 'vue-router'
// import {getSubCategoryListAPI, getBySubCategoryAPI } from '@/apis/category'
//
// // 面包屑数据
// const subCategoryList = ref({})
// const route = useRoute()
//
// // 商品列表数据
// const goodList = ref([])
// const loading = ref(true)
// const error = ref('')
// const sortField = ref('publishTime')
//
// // 获取分类信息
// const getSubCategory = async () => {
//   try {
//     const res = await getBySubCategoryAPI(route.params.id)
//     subCategoryList.value = res.data
//   } catch (err) {
//     error.value = `分类信息加载失败: ${err.message}`
//   }
// }
//
// // 获取全部商品
// const getAllProducts = async () => {
//   try {
//     loading.value = true
//     const res=await getSubCategoryListAPI(route.params.id)
//
//     goodList.value = res.data.map(item => ({
//       ...item,
//       price: Number(item.price),
//       orderNum: Number(item.orderNum),
//       desc: item.description || item.desc // 统一描述字段
//     }))
//   } catch (err) {
//     error.value = `商品加载失败: ${err.message}`
//   } finally {
//     loading.value = false
//   }
// }
//
// // 排序变更处理
// const handleSortChange = () => {
//   getAllProducts()
// }
//
// // 初始化加载
// onMounted(async () => {
//   await getSubCategory()
//   await getAllProducts()
// })
</script>
<style scoped>
/* 容器样式（与搜索页面一致） */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 60vh;
}

/* 面包屑导航（新增Element组件样式调整） */
.bread-container {
  padding: 25px 0;
  margin-bottom: 20px;
  :deep(.el-breadcrumb) {
    font-size: 14px;
    .el-breadcrumb__inner {
      color: #666;
      &:hover {
        color: var(--el-color-primary);
      }
    }
    .el-breadcrumb__separator {
      margin: 0 6px;
    }
  }
}

/* 加载状态（与搜索页面一致） */
.loading {
  text-align: center;
  padding: 2rem;
  color: #666;
  .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
    margin-bottom: 1rem;
  }
}

/* 错误提示（与搜索页面一致） */
.error-card {
  padding: 2rem;
  background: #fff5f5;
  border: 1px solid #ffd6d6;
  border-radius: 8px;
  text-align: center;
  color: #dc3545;
  margin: 2rem 0;
  .error-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 1rem;
  }
}

/* 空状态（与搜索页面一致） */
.empty-state {
  text-align: center;
  padding: 4rem 0;
  .empty-image {
    width: 150px;
    opacity: 0.6;
    margin-bottom: 1rem;
  }
  p {
    color: #999;
    font-size: 0.95rem;
  }
}

/* 商品网格布局（与搜索页面一致） */
.products-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-top: 20px;
}

/* 商品卡片（与搜索页面一致） */
.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none; /* 新增链接样式重置 */

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

.product-image {
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: #f8f8f8;
  padding: 1rem;
}

.product-info {
  padding: 1.2rem;
}

.product-name {
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  color: #e4393c;
  font-size: 1.2rem;
  font-weight: bold;
}

.product-sales {
  font-size: 0.9rem;
  color: #999;
}

/* 分类页面独有样式 */
.sub-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);

  /* 选项卡样式调整 */
  :deep(.el-tabs) {
    margin-bottom: 20px;

    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #eee;
    }

    .el-tabs__active-bar {
      height: 3px;
      background-color: var(--el-color-primary);
    }

    .el-tabs__item {
      font-size: 15px;
      &:hover {
        color: var(--el-color-primary);
      }
      &.is-active {
        color: var(--el-color-primary);
      }
    }
  }
}

/* 加载更多提示 */
.loading-text {
  text-align: center;
  padding: 20px;
  color: #666;

  .loader.small {
    width: 20px;
    height: 20px;
    margin: 0 auto 10px;
    border: 2px solid #f3f3f3;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
  }
}

/* 动画定义 */
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>